<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号(ID)" prop="id" min-width="90" />
                <el-table-column label="显示开始时间" prop="show_start_time" min-width="180" />
                <el-table-column label="显示结束时间" prop="show_time" min-width="180" />
                <el-table-column label="业务名称" prop="business_name" min-width="180" />
                <el-table-column label="渠道名" prop="cooperation.channel_name" min-width="180" />
                <el-table-column label="用户名" prop="cooperation.user_name" min-width="180" />
                <el-table-column label="合作编号" prop="cooperation.sn" min-width="180" />
                <el-table-column label="放款金额" prop="quota" min-width="180" />
                <el-table-column label="服务费" prop="server_price" min-width="180" />
                <el-table-column label="是否显示" prop="server_price" min-width="180">
                    <template #default="{ row }">
                        <span>{{ row.is_show == 1 ? '是': '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <router-link v-perms="['cooperation.cooperation/posterInfo']" :to="{ path: getRoutePath('cooperation.cooperation/posterInfo'), query: { id: row.id } }">
							<el-button type="primary" link>详情</el-button>
						</router-link>
                        <el-button class="ml-[10px]" type="warning" link @click="showGood(row)">合作喜报</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
        </el-card>
        <!-- 合作喜报 -->
		 <el-dialog
			v-model="showDialog"
			title="合作喜报"
			width="880"
		>
			<div class="flex justify-between mb-[20px]">
				<div class="w-[350px]">
					<el-form ref="formGood" class="mb-[-16px]" :model="goodParams" :inline="true" label-width="80px">
						<el-form-item label="渠道头像" prop="avator">
							<div class="w-80">
								<div>
									<material-picker v-model="goodParams.ce_avator" size="60px" :limit="1"/>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="渠道名称">
							<el-input class="w-[280px]" v-model="goodParams.ce_real_name" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="渠道描述">
							<el-input class="w-[280px]" v-model="goodParams.ce_des" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="渠道城市">
							<el-input class="w-[280px]" v-model="goodParams.ce_city" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="用户头像" prop="avator">
							<div class="w-80">
								<div>
									<material-picker v-model="goodParams.u_avatar" size="60px" :limit="1"/>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="用户名称">
							<el-input class="w-[280px]" v-model="goodParams.u_real_name" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="用户描述">
							<el-input class="w-[280px]" v-model="goodParams.u_des" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="用户城市">
							<el-input class="w-[280px]" v-model="goodParams.u_city" clearable maxlength="5" />
						</el-form-item>
						<el-form-item label="合作描述">
							<el-input class="w-[280px]" v-model="goodParams.des" clearable maxlength="20" />
						</el-form-item>
						<el-form-item label="合作时间">
							<div class="inp-date">
								<el-date-picker
									class="inp-date"
									v-model="goodParams.create_time"
									type="date"
									placeholder="选择日期"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
								>
								</el-date-picker>
							</div>
						</el-form-item>
						<el-form-item label="放款金额">
							<el-input class="w-[280px]" v-model="goodParams.price" type="number" clearable maxlength="20" />
						</el-form-item>
						<el-form-item label="业务类型">
							<el-input class="w-[280px]" v-model="goodParams.type" clearable maxlength="20" />
						</el-form-item>
						<el-form-item label="渠道佣金">
							<el-input class="w-[280px]" v-model="goodParams.channel_price" type="number" clearable maxlength="20" />
						</el-form-item>
					</el-form>
				</div>
				<div class="w-[450px]">
					<el-carousel v-if="img_list.length != 0" :interval="4000" type="card" height="334px" :autoplay="false" arrow="never" trigger="click" @change="onChange_carousel">
						<el-carousel-item class="img-content" v-for="(item,index) in img_list" :key="index">
							<div v-if="item.type == 1">
								<div :ref="el => setItemRef(el as HTMLElement, item.id)" class="img-new">
									<img class="name-bg" :src="item.url" alt="" crossorigin="anonymous"/>
									<div class="name-pos">
										<div class="name-flex">
											<div class="head-flex">
												<img class="good-head" :src="goodParams.ce_avator" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.ce_real_name }}</div>
												<div class="head-des">{{ goodParams.ce_des }}</div>
												<div class="head-city">{{ goodParams.ce_city }}</div>
											</div>
											<div class="head-flex">
												<img class="good-head" :src="goodParams.u_avatar" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.u_real_name }}</div>
												<div class="head-des">{{ goodParams.u_des }}</div>
												<div class="head-city">{{ goodParams.u_city }}</div>
											</div>
										</div>
										<div class="name-des">{{ goodParams.des }}</div>
										<div class="name-time">合作时间：{{ goodParams.create_time }}</div>
									</div>
								</div>
							</div>
							<div  v-if="item.type == 2">
								<div :ref="el => setItemRef(el as HTMLElement, item.id)" class="img-new type-two">
									<img class="name-bg" :src="item.url" alt="" crossorigin="anonymous"/>
									<div class="name-pos">
										<div class="two-des">{{ goodParams.des }}</div>
										<div class="name-flex">
											<div class="head-flex">
												<img class="good-head" :src="goodParams.ce_avator" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.ce_real_name }}</div>
												<div class="head-des">{{ goodParams.ce_des }}</div>
												<div class="head-city">{{ goodParams.ce_city }}</div>
											</div>
											<div class="head-flex">
												<img class="good-head" :src="goodParams.u_avatar" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.u_real_name }}</div>
												<div class="head-des">{{ goodParams.u_des }}</div>
												<div class="head-city">{{ goodParams.u_city }}</div>
											</div>
										</div>
										<div class="two-time">合作时间：{{ goodParams.create_time }}</div>
									</div>
								</div>
							</div>
							<div  v-if="item.type == 3">
								<div :ref="el => setItemRef(el as HTMLElement, item.id)" class="img-new type-three">
									<img class="name-bg" :src="item.url" alt="" crossorigin="anonymous"/>
									<div class="name-pos">
										<!-- <div class="two-des">{{ goodParams.des }}</div> -->
										<div class="name-flex">
											<img class="name-head" src="https://files.onestep6.com/2024/static/image/good_head.png" alt="">
											<!-- <div class="des-line"></div> -->
											<div class="head-flex">
												<img class="good-head" :src="goodParams.ce_avator" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.ce_real_name }}</div>
												<div class="head-des">{{ goodParams.ce_des }}</div>
												<div class="head-city">{{ goodParams.ce_city }}</div>
											</div>
											<div class="head-flex">
												<img class="good-head" :src="goodParams.u_avatar" alt="" crossorigin="anonymous"/>
												<div class="head-name">{{ goodParams.u_real_name }}</div>
												<div class="head-des">{{ goodParams.u_des }}</div>
												<div class="head-city">{{ goodParams.u_city }}</div>
											</div>
										</div>
										<div class="three-price">{{ goodParams.price }}</div>
										<div class="price-flex">
											
											<div class="price-des">放款金额(元)
												<div class="price-line"></div>
												<div class="line-right"></div>
											</div>
											
										</div>
										<div class="type-flex">
											<div class="type-content">
												<div class="type-top">{{ goodParams.type }}</div>
												<div class="type-txt">业务类型</div>
											</div>
											<div class="type-content">
												<div class="type-top">{{ goodParams.channel_price }}元</div>
												<div class="type-txt">渠道佣金</div>
											</div>
											<img class="three-gx" src="https://files.onestep6.com/2024/static/image/good_gx.png" alt="">
										</div>
										<div class="two-time">合作时间：{{ goodParams.create_time }}</div>
									</div>
								</div>
							</div>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<div class="dispute-flex">
				<el-button @click="()=>{showDialog = false}">取消</el-button>
				<el-button type="primary" @click="onSaveImg">保存图片</el-button>
			</div>
		</el-dialog>
    </div>
</template>
<script lang="ts" setup name="cooperationPoster">
import { exportToImage } from '@/utils/exportImage';
import { usePaging } from '@/hooks/usePaging';
import { getRoutePath } from '@/router';
import { posterList } from '@/api/cooperate/lists';
import { ElLoading } from 'element-plus'

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: posterList,
    params: {}
})
getLists()

const showDialog = ref(false)
	const goodParams = reactive({
		ce_real_name: '',
		ce_avator: '',
		ce_des: '接单渠道',
		ce_city: '杭州市',
		u_real_name: '',
		u_avatar: '',
		u_des: '需求用户',
		u_city: '杭州市',
		des: '“恭喜双方在平台达成合作”',
		create_time: '',
		price: '',
		type: '',
		channel_price: ''
	})
	const img_list = [
		{id: 0, type: 1, ref: 'contentRef0', url: 'https://files.onestep6.com/2024/static/image/good_new0.png'},
		{id: 1, type: 2, ref: 'contentRef1', url: 'https://files.onestep6.com/2024/static/image/good_new1.png'},
		{id: 2, type: 3, ref: 'contentRef2', url: 'https://files.onestep6.com/2024/static/image/good_new2.png'},
	]
	const itemRefs = ref<Record<number, HTMLElement | null>>({})
 
	const setItemRef = (el: HTMLElement | null, id: number) => {
		if (el) {
			itemRefs.value[id] = el
		}
	}
	const onChange_carousel = (e:any) => {
		console.log(e)
		index_num.value = e;
	}
	const index_num:any = ref(0)
	
	const onSaveImg = async () => {
		console.log(itemRefs.value)
		console.log(index_num.value)
		startSave()
    };
	const startSave = async () => {
		  try {
			console.log(itemRefs.value[index_num.value])
			// return false;
			const loading = ElLoading.service({
				lock: true,
				text: '图片生成中......',
				// background: 'rgba(0, 0, 0, 0.7)',
			})
		    await exportToImage(itemRefs.value[index_num.value] as any, '合作喜报', {
		      // 可以在这里覆盖默认选项
		      scale: 10, // 更高的清晰度
		    });
			setTimeout(() => {
				loading.close()
			}, 2000)
		  } catch (error) {
		    alert('导出失败，请重试');
		  }
	}
	const showGood = (row:any) => {
		console.log(row)
		goodParams.ce_real_name = row.cooperation.channel_name.slice(0,5);
		goodParams.u_real_name = row.cooperation.user_name.slice(0,5);
		goodParams.ce_avator = row.cooperation.channel_header;
		goodParams.u_avatar = row.cooperation.user_header;
		goodParams.ce_city = row.cooperation.channel_area;
		goodParams.u_city = row.cooperation.user_area;
		// console.log(goodParams)
		// console.log(img_list)
		goodParams.create_time = row.show_start_time.split(' ')[0];
		goodParams.price = row.quota;
		goodParams.type = row.business_name;
		goodParams.channel_price = row.server_price;
		showDialog.value = true;
	}
</script>
<style lang="scss" scoped>
.dispute-flex{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	span{
		margin-right: 20px;
	}
}
.picker{
    width: 388px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
.img-content{
	width: 188px;
	height: 334px;
}
.img-new{
	position: relative;
	display: block;
	width: 188px;
	height: 334px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding-top: 151px;
	.name-bg{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		display: block;
		width: 188px;
		height: 334px;
	}
	.name-pos{
		position: relative;
		z-index: 10;
	}
	.name-flex{
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 0 36px;
		margin-bottom: 7px;
	}
	.head-flex{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.good-head{
		display: block;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		border: 1px solid #FFD0A7;
		margin-bottom: 2px;
	}
	.head-bot{
		height: 2px;
	}
	.head-name{
		height: 9px;
		font-size: 9px;
		line-height: 9px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 6px;
	}
	.head-des{
		// width: fit-content;
		width: 30px;
		height: 9px;
		font-size: 6px;
		line-height: 9px;
		font-weight: bold;
		// padding: 0 3px;
		// border-radius: 4px;
		// background-color: #FFFFFF;
		// background-position: 0 0;
		text-align: center;
		// color: #F20B1B;
		color: #FFFFFF;
		margin-bottom: 3px;
	}
	// .des-line{
	// 	position: absolute;
	// 	top: 48px;
	// 	left: 44px;
	// 	z-index: 1;
	// 	width: 30px;
	// 	height: 9px;
	// 	border: 1px solid #F26767;
	// 	border-radius: 4px;
	// }
	.head-city{
		font-size: 7px;
		line-height: 7px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
	.name-des{
		width: 156px;
		height: 26px;
		margin: 0 auto 10px;
		font-size: 12px;
		line-height: 13px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
	.name-time{
		font-size: 8px;
		line-height: 11px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
}
.type-two{
	padding-top: 125px;
	.two-des{
		width: 108px;
		height: 28px;
		margin: 0 auto 4px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		color: #DF1313;
	}
	.good-head{
		border: 1px solid #DF1313;
	}
	.head-name{
		color: #333333;
	}
	.head-des{
		color: #F20B1B;
		background: transparent;
		// border: 1px solid #F26767;
	}
	.head-city{
		color: #820D0D;
		margin-bottom: 60px;
	}
	.two-time{
		font-size: 6px;
		line-height: 8px;
		color: #860606;
		font-weight: 400;
		text-align: center;
	}
}
.type-three{
	padding-top: 132px;
	.two-des{
		width: 108px;
		height: 28px;
		margin: 0 auto 4px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		color: #DF1313;
	}
	.name-flex{
		margin-bottom: 0;
	}
	.name-head{
		position: absolute;
		display: block;
		width: 42px;
		height: 23px;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
	}
	.good-head{
		border: 1px solid #DF1313;
		margin-bottom: 0px !important;
	}
	.head-name{
		color: #333333;
		margin-top: -2px !important;
	}
	.head-des{
		color: #F20B1B;
		background: transparent;
		margin-bottom: 2px;
		// border: 1px solid #F26767;
	}
	.head-city{
		color: #820D0D;
		margin-bottom: 0px;
	}
	.three-price{
		font-size: 20px;
		font-weight: bold;
		color: #DF1313;
		text-align: center;
		line-height: 20px;
		margin-bottom: 5px;
	}
	.price-flex{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #860606;
		line-height: 6px;
		margin: 0 46px 5px;
		.price-line{
			position: absolute;
			top: 8px;
			left: -36px;
			width: 36px;
			border-top: 1px solid #860606;
			transform: scale(0.5);
		}
		.line-right{
			position: absolute;
			top: 8px;
			right: -36px;
			width: 36px;
			border-top: 1px solid #860606;
			transform: scale(0.5);
		}
		.price-des{
			position: relative;
			font-size: 6px;
			font-weight: bold;
			color: #860606;
			line-height: 6px;
			margin: 0 6px;
		}
	}
	.type-flex{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 46px;
		margin-bottom: 25px;
		.type-content{
			width: fit-content;
		}
		.type-top{
			font-size: 8px;
			line-height: 11px;
			color: #DF1313;
			font-weight: bold;
			margin-bottom: 1px;
			text-align: center;
		}
		.type-txt{
			font-size: 6px;
			line-height: 8px;
			color: #860606;
			font-weight: 400;
			text-align: center;
		}
	}
	.three-gx{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -28px;
		display: block;
		width: 80px;
		height: 19px;
		z-index: 10;
	}
	.two-time{
		font-size: 6px;
		line-height: 8px;
		color: #860606;
		font-weight: 400;
		text-align: center;
	}
}
.inp-date{
	::v-deep .el-input__wrapper{
		width: 280px;
	}
}
</style>